<template>
	<view class="search">
		<u-navbar :titleStyle="{fontWeight:'bold'}" title="商品列表" />
		<view class="search-list">
			<commodity-item mode="1" :list="list" @skuChang="skuChang"/>
		</view>
		<commodity-sku :sku_data="sku_data" :show="sku_stats" @close="sku_stats=false" ref="commSku"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				limit:8,
				keyword:'',
				list:[],
				total_page:0,
				sku_data:{},
				sku_stats:false
			};
		},
		onReachBottom(){
			if(!this.dropdown(this.page,this.total_page)){
				this.page++
				this.getcommodity()
			}
		},
		onLoad(e){
			this.keyword = e.keyword
			this.getcommodity()
		},
		methods:{
			skuChang(e){
				this.sku_data = e
				this.sku_stats = true
			},
			getcommodity(keyword){
				this.$network('/api/goods/lists',{
					page:this.page,
					limit:this.limit,
					keyword:this.keyword
				}).then(res=>{
					const { list,total_page} = res.data
					if(this.page!=1){
						this.list = [...this.list,...list]
					}else{
						this.list = list
					}
					this.total_page = total_page
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #F5F5F5;
}
</style>
